<template>
  <!-- 增加修改 -->
  <ant-modal
    :visible="open"
    :modal-title="formTitle"
    :adjust-size="true"
    modalHeight="750"
    modalWidth="950"
    @cancel="cancel"
  >
    <a-form-model ref="form" slot="content" layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-table
            bordered
            size="middle"
            style="margin-top: 8px"
            :data-source="dataSource"
            :columns="deptColumns"
            :pagination="false"
          >
            <template
              v-for="col in [
                'calls',
                'newCus',
                'genjin',
                'toHome',
                'jinjian',
                'shouru',
              ]"
              :slot="col"
              slot-scope="text, record"
            >
              <div :key="col">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="(e) => handleChange(e.target.value, record, col)"
                />
              </div>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-form-model>

    <template slot="footer">
      <a-button type="primary" @click="handleAddDeptTarget()">
        保存配置
      </a-button>
      <a-button @click="cancel"> 取消 </a-button>
    </template>
  </ant-modal>
</template>
<script>
import { listBizDeptTarget, addBizDeptTarget } from "@/api/biz/bizDeptTarget";
import AntModal from "@/components/pt/dialog/AntModal";
export default {
  name: "SetUserTarget",
  props: {
    userId: {
      type: String,
      default: "",
    },
    userName: {
      type: String,
      default: "",
    },
  },
  components: { AntModal },
  data() {
    return {
      visible: false,
      open: false,
      deptTargetSet: {},
      formTitle: "【" + this.userName + "】个人目标设置",
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        userId: this.userId,
      },
      deptColumns: [
        {
          title: "部门业绩目标",
          dataIndex: "deptMuBiao",
          align: "center",
          width: "15%",
          key: "deptMuBiao",
        },
        {
          title: "拨打电话(通)",
          dataIndex: "calls",
          scopedSlots: { customRender: "calls" },
          align: "center",
          width: "12%",
          key: "calls",
        },
        {
          title: "新增客户(位)",
          dataIndex: "newCus",
          scopedSlots: { customRender: "newCus" },
          align: "center",
          width: "12%",
          key: "newCus",
        },
        {
          title: "跟进客户(次)",
          dataIndex: "genjin",
          scopedSlots: { customRender: "genjin" },
          align: "center",
          width: "12%",
          key: "genjin",
        },
        {
          title: "邀约上门(位)",
          dataIndex: "toHome",
          scopedSlots: { customRender: "toHome" },
          align: "center",
          width: "12%",
          key: "toHome",
        },
        {
          title: "进件(笔)",
          dataIndex: "jinjian",
          scopedSlots: { customRender: "jinjian" },
          align: "center",
          width: "12%",
          key: "jinjian",
        },
        {
          title: "收入金额(元)",
          dataIndex: "shouru",
          scopedSlots: { customRender: "shouru" },
          align: "center",
          width: "12%",
          key: "shouru",
        },
      ],

      dataSource: [],
    };
  },
  filters: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    handleDeptTargetSet() {
      const params = { userId: this.userId };
      listBizDeptTarget(params).then((res) => {
        this.bizDeptTargetList = res.data;
        this.dataSource = res.data;
        this.deptTargetSet = {
          id: res.data[0].id,
          dCalls: res.data[0].calls,
          dAddCus: res.data[0].newCus,
          dGenjins: res.data[0].genjin,
          dGoHome: res.data[0].toHome,
          dJinjians: res.data[0].jinjian,
          dShouru: res.data[0].shouru,
          wCalls: res.data[1].calls,
          wAddCus: res.data[1].newCus,
          wGenjins: res.data[1].genjin,
          wGoHome: res.data[1].toHome,
          wJinjians: res.data[1].jinjian,
          wShouru: res.data[1].shouru,
          mCalls: res.data[2].calls,
          mAddCus: res.data[2].newCus,
          mGenjins: res.data[2].genjin,
          mGoHome: res.data[2].toHome,
          mJinjians: res.data[2].jinjian,
          mShouru: res.data[2].shouru,
        };
      });
    },
    handleChange(value, record, column) {
      if (record.deptMuBiao === "日") {
        if (column === "calls") {
          this.deptTargetSet.dCalls = value;
          this.dataSource[0].calls = value;
        }
        if (column === "newCus") {
          this.deptTargetSet.dAddCus = value;
          this.dataSource[0].newCus = value;
        }
        if (column === "genjin") {
          this.deptTargetSet.dGenjins = value;
          this.dataSource[0].genjin = value;
        }
        if (column === "toHome") {
          this.deptTargetSet.dGohome = value;
          this.dataSource[0].toHome = value;
        }
        if (column === "jinjian") {
          this.deptTargetSet.dJinjians = value;
          this.dataSource[0].jinjian = value;
        }
        if (column === "shouru") {
          this.deptTargetSet.dShouru = value;
          this.dataSource[0].shouru = value;
        }
      }
      if (record.deptMuBiao === "周") {
        if (column === "calls") {
          this.deptTargetSet.wCalls = value;
          this.dataSource[1].calls = value;
        }
        if (column === "newCus") {
          this.deptTargetSet.wAddCus = value;
          this.dataSource[1].newCus = value;
        }
        if (column === "genjin") {
          this.deptTargetSet.wGenjins = value;
          this.dataSource[1].genjin = value;
        }
        if (column === "toHome") {
          this.deptTargetSet.wGohome = value;
          this.dataSource[1].toHome = value;
        }
        if (column === "jinjian") {
          this.deptTargetSet.wJinjians = value;
          this.dataSource[1].jinjian = value;
        }
        if (column === "shouru") {
          this.deptTargetSet.wShouru = value;
          this.dataSource[1].shouru = value;
        }
      }
      if (record.deptMuBiao === "月") {
        if (column === "calls") {
          this.deptTargetSet.mCalls = value;
          this.dataSource[2].calls = value;
        }
        if (column === "newCus") {
          this.deptTargetSet.mAddCus = value;
          this.dataSource[2].newCus = value;
        }
        if (column === "genjin") {
          this.deptTargetSet.mGenjins = value;
          this.dataSource[2].genjin = value;
        }
        if (column === "toHome") {
          this.deptTargetSet.mGohome = value;
          this.dataSource[2].toHome = value;
        }
        if (column === "jinjian") {
          this.deptTargetSet.mJinjians = value;
          this.dataSource[2].jinjian = value;
        }
        if (column === "shouru") {
          this.deptTargetSet.mShouru = value;
          this.dataSource[2].shouru = value;
        }
      }
    },
    handleAddDeptTarget() {
      this.deptTargetSet.userId = this.userId;
      addBizDeptTarget(this.deptTargetSet).then((response) => {
        this.handleDeptTargetSet();
        this.$message.success("保存设置成功", 3);
        this.cancel();
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.handleDeptTargetSet();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$emit("close");
    },
  },
};
</script>
